<!DOCTYPE html>
<html lang="en">
<nav th:fragment="~{shared::nav}" class="fixed top-0 w-full bg-gray-900 text-gray-300 py-4 mt-auto">
  <div class="container mx-auto flex flex-col items-center justify-center">
    <div class="text-2xl">大问答模型</div>
    <nav class="space-x-4">
      <a href="#" onclick="toHome()" class="hover:text-white">主页</a>
      <a href="#" onclick="toCollections()" class="hover:text-white">查看收藏</a>
      <div class="relative inline-block text-left">
        <span><a href="#" class="hover:text-white">服务</a></span>
        <div id="serviceDropdown" class="hidden absolute z-10 -mt-1 right-0 bg-white rounded-lg shadow-lg w-32">
          <a href="#" onclick="toChat()" class="block py-2 px-4 text-gray-700 hover:bg-gray-200">聊天</a>
          <a href="#" onclick="toImage()" class="block py-2 px-4 text-gray-700 hover:bg-gray-200">构图</a>
        </div>
      </div>
      <a href="#" onclick="toUser()" class="hover:text-white">个人资料</a>
    </nav>
  </div>
</nav>
<body>
</body>
</html>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    const dropdown = document.getElementById('serviceDropdown');
    const serviceLink = document.querySelector('.relative');

    serviceLink.addEventListener('click', function(event) {
      event.stopPropagation();
      dropdown.classList.toggle('hidden');
    });

    document.addEventListener('click', function(event) {
      if (!serviceLink.contains(event.target)) {
        dropdown.classList.add('hidden');
      }
    });
  });
</script>